<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>折叠菜单</title>
	<style>
		/**{padding:0;margin:0;}*/
		li ul{
			display:none;
		}
	</style>
</head>
<body>
	<ul >
		<li class="ss1" onclick="demo(1)" >
			菜单一
			<ul id="sss1">
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
		</li>
		<li class="ss1" onclick="demo(2)" >
			菜单二
			<ul  id="sss2" >
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
		</li>
		<li class="ss1" onclick="demo(3)" >
			菜单三
			<ul id="sss3" >
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
		</li>
	</ul>
</body>
	<script>
		list1 = document.getElementsByClassName("ss1");
		function demo(m){
			for(var i=1;i<=list1.length;i++){
				if(i==m){
					var u = document.getElementById("sss"+i);
					u.style.display="block";
				}
			}
		}
	</script>
</html>